<template>
    <div>
        <el-tabs v-if="tabsFlag" ref="currentTabs" v-model="activeName" :class="activeName == 'protectionSettings' ? 'settings-tabs' : 'demo-tabs'" :lazy="true" @click="cleanRowData">
            <template v-for="(tabItem,tabIndex) in tabData()" :key="tabIndex">
                <el-tab-pane v-if="!tabItem.hide" :label="tabItem.label" :name="tabItem.name">
                    <template v-if="activeName == tabItem.name">
                        <component :is="tabItem.content" @reload="reload" @toCurrentWitelist="toCurrentWitelist" :tabData="tabData()" :rowData="rowData"></component>
                    </template>
                </el-tab-pane>
            </template>
        </el-tabs>
    </div>
</template>

<script setup>
import { ref, reactive, nextTick, toRaw, watch } from "vue";
import { useTreeStore } from "~/utils/pinia/tree.js";
import WhitelistWindows from "./components/WhitelistWindows.vue";
import ProgramWhitelist from "./components/ProgramWhitelist.vue";
import ProtectionSettings from "./components/ProtectionSettings.vue";
import BuiltInWhitelist from "./components/BuiltInWhitelist.vue";
import ExceptionProgram from "./components/ExceptionProgram.vue";
import KillSettings from "./components/KillSettings.vue";
let treeStore = useTreeStore();
treeStore.openTree();
let activeName = ref("programWhitelist");
const currentTabs = ref();
const tabsFlag = ref(true);
let rowData = [];
// const tabData = [
//     {label:'当前程序白名单',name:'programWhitelist',content:ProgramWhitelist, hide: false},
//     {label:'白名单列表',name:'whitelistWindows',content:WhitelistWindows, hide: false},
//     {label:'内置白名单',name:'builtInWhitelist',content:BuiltInWhitelist, hide: true},
//     {label:'例外程序',name:'exceptionProgram',content:ExceptionProgram, hide: false},
//     {label:'防护设置',name:'protectionSettings',content:ProtectionSettings, hide: false},
//     {label:'防杀设置',name:'killSettings',content:KillSettings, hide: true},
// ]

const tabData = () => {
  if (treeStore.osType == "win") {
    return [
      {
        label: "当前程序白名单",
        name: "programWhitelist",
        content: ProgramWhitelist,
        hide: false,
      },
      {
        label: "白名单列表",
        name: "whitelistWindows",
        content: WhitelistWindows,
        hide: false,
      },
      {
        label: "内置白名单",
        name: "builtInWhitelist",
        content: BuiltInWhitelist,
        hide: true,
      },
      {
        label: "例外程序",
        name: "exceptionProgram",
        content: ExceptionProgram,
        hide: false,
      },
      {
        label: "防护设置",
        name: "protectionSettings",
        content: ProtectionSettings,
        hide: false,
      },
    ];
  } else {
    return [
      {
        label: "当前程序白名单",
        name: "programWhitelist",
        content: ProgramWhitelist,
        hide: false,
      },
      {
        label: "白名单列表",
        name: "whitelistWindows",
        content: WhitelistWindows,
        hide: false,
      },
      { label: "防杀设置", name: "killSettings", content: KillSettings, hide: false },
    ];
  }
};
const cleanRowData = () => {
  rowData = [];
}
const toCurrentWitelist = (index, row) => {
  tabsFlag.value = false;
  activeName.value = "programWhitelist";
  rowData = [];
  nextTick(() => {
    tabsFlag.value = true;
    rowData = toRaw(row);
  });
};
const reload = (index, row) => {
  tabsFlag.value = false;
  nextTick(() => {
    tabsFlag.value = true;
  });
};
watch(
  () => treeStore.treeDeviceId,
  () => {
    activeName.value = "programWhitelist";
  }
);
</script>

<style lang="scss" scoped>
:deep(.settings-tabs .el-tabs__header){
  border-radius: 0;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  margin-bottom: 0;
  padding: 10px 0;
}
:deep(.settings-tabs .el-tabs__item.is-top:nth-child(2)){
  padding-left: 32px;
}
:deep(.settings-tabs .el-tabs__nav-wrap::after){
  height: 1px;
}
</style>
